<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>TimePicker 时间选择器</title>
</head>
<body>
	<div id="app">
		<h3>固定时间点</h3>
		<el-time-select v-model="value01" :picker-options="{
			start: '08:30',step: '00:15',end: '18:30'
  		}" placeholder="选择时间"> </el-time-select>

		<h3>任意时间点</h3>
		<el-time-picker v-model="value02" :picker-options="{
		      selectableRange: '18:30:00 - 20:30:00'
		}" placeholder="任意时间点"> </el-time-picker>

		<h4>任意时间范围</h4>
		<el-time-picker is-range v-model="value03" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
	
		<div>
			{{value03}}
		</div>
	
	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					value01 : '',
					value02 : '',
					value03 : [ new Date(0, 0, 0, 8, 40), new Date(0, 0, 0, 9, 40) ],
				}
			},
			methods : {}
		})
	</script>
</body>
</html>